<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRoute} from "vue-router";
import router from "@/router";
import PerfumeItem from "@/components/PerfumeItem.vue";

const brandInfo = ref(Object)

const route = useRoute()
const isBad = ref(false)
const brandId = ref(0)
const initData = async () => {
  axios.post(`/api/brand/get/${brandId.value}`, {}, {
    headers: {
      token: localStorage.getItem("patient-auth-token")
    }
  })
      .then(res => {
        // console.log(res)
        if (res.data.success) {
          const msg = res.data.message
          console.log(msg)
          brandInfo.value = msg
          initName.value = msg.name
          perfumeVos.value = msg.perfumeVos
        } else {
          showLoading.value = "暂无香水记录，换个其他品牌？"
          isBad.value = true
          setTimeout(() => {
            router.push('/')
          }, 1000)
        }
      })
}
const initName = ref(route.query.name)
const showLoading = ref('加载中...，耐心等待')
const perfumeVos = ref([])
const onLoad = async () => {
  initName.value = route.query.name
  brandId.value = route.query.id
  // console.log(route.query)
}
onMounted(async () => {
  await onLoad()
  await initData()
})
const handleUserCollect = (index: number, newStatus: boolean) => {
  perfumeVos.value[index].userCollect = newStatus; // 更新收藏状态
};
const back = () => {
  router.push("/bland")
}
</script>

<template>
  <div class="brand-main">
    <div class="top-back">
      <q-btn color="grey-4" icon="arrow_back_ios" outline round @click="back"/>
    </div>
    <div style="margin-top: 100px;margin-bottom: 50px;width: 100%;text-align: center;
    display: flex;flex-direction: column"
    >
      <view class="text-h3">{{ initName }}</view>
      <view class="text-h5" style="margin-top: 30px;">{{ perfumeVos.length }} fragancias</view>
    </div>
    <div class="perfume-group">
      <div class="text-h4">香水</div>
      <div class="perfume-group-list">
        <PerfumeItem
            v-for="(item,index) in perfumeVos" :key="index"
            :brand-id="item.brandId"
            :brand-text="item.brandText" :fragrance-note="item.fragranceNote"
            :img="item.img"
            :ingredients="item.ingredients"
            :name="item.name"
            :perfume-id="item.perfumeId"
            :price="item.price"
            :smell="item.smell"
            :user-collect="item.userCollect"
            :year="item.year"
            @updateUserCollect="handleUserCollect(index, $event)"/>
        <div v-show="perfumeVos.length == 0" class="q-pa-md" style="width: 100%;">
          <div class="q-gutter-md">
            <view style="display: flex;align-items: center">
              <q-skeleton size="100px" type="circle"/>
              <view class="text-h4" style="margin-left: 30px;">{{ showLoading }}</view>
            </view>
            <q-skeleton width="150px"/>
            <q-skeleton height="150px"/>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.brand-main {
  width: 100vw;
  display: flex;
  flex-direction: column;

  .top-back {
    margin-top: 10px;
    display: flex;
    align-items: center;
    width: 94vw;
    margin-left: 3vw;
  }

  .perfume-group {
    margin-top: 50px;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;


  }

  .perfume-group-list {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
